<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../../css/myCenter.css">
    <script src="../../../js/jquery.js"></script>
    <script src="../../../js/back/cuisine.js"></script>

    <script src="../../../js/wangEditor.min.js"></script>

</head>
<body>
<div class="middle">
    <div>
        <div>
            菜系名称
            <select id="cuisine">
                <option value="1">川菜</option>
                <option value="1">川菜</option>
                <option value="1">川菜</option>
            </select>
        </div>

        <div>
            产品名称<input type="text" id="productName">
        </div>
        <div>
            市场价<input type="text" id="price">
        </div>
        <div>
            正常价<input type="text" id="normalPrice">
        </div>
        <div>
            图片<input type="file" id="imgHref"><img id="imgString" src="" style="width: 50px;height: 50px">
        </div>
        <div>
            是否上架
            <label><input type="radio" name="isShow" value="1" checked>是</label>
            <label><input type="radio" name="isShow" value="0">否</label>
        </div>
        <div>
            是否置顶
            <label><input type="radio" name="isRecommend" value="1">是</label>
            <label><input type="radio" name="isRecommend" value="0" checked>否</label>
        </div>
        <div>
            <div id="wangEdit"></div>
        </div>

        <div><input type="button" value="提交" onclick="save()"></div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    var WangEdit = window.wangEditor;
    var editor = new WangEdit('#wangEdit');
    // 或者 const editor = new E( document.getElementById('div1') )
    // editor.config.height = 500;
    let editUrl = '/loadImg/img';//服务器访问地址
    editor.customConfig.menus = [
        'head',  // 标题
        'bold',  // 粗体
        'fontSize',  // 字号
        'fontName',  // 字体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'link',  // 插入链接
        'justify',  // 对齐方式
        'emoticon',  // 表情
        'image',  // 插入图片
        'table',  // 表格
        'undo',  // 撤销
        'redo'  // 重复
    ];
    editor.customConfig.uploadImgShowBase64 = true;  // 使用 base64 保存图片
    editor.customConfig.uploadImgServer = editUrl; // 上传图片到服务器
    editor.customConfig.showLinkImg = false;// 隐藏“网络图片”tab
    //配置属性名称，绑定请求的图片数据
    //controller会用到，可以随便设置，但是一定要与controller一致
    editor.customConfig.uploadFileName = 'img';
    editor.customConfig.withCredentials = true;
    // 将图片大小限制为 5M
    editor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024;
    editor.customConfig.uploadImgHooks = {
        before: function (xhr, editor, files) {
            // 图片上传之前触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

            // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
            // return {
            //     prevent: true,
            //     msg: '放弃上传'
            // }
        },
        success: function (xhr, editor, result) {
            // 图片上传并返回结果，图片插入成功之后触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            console.log(result);
        },
        fail: function (xhr, editor, result) {
            // 图片上传并返回结果，但图片插入错误时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        error: function (xhr, editor) {
            // 图片上传出错时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },
        timeout: function (xhr, editor) {
            // 图片上传超时时触发
            // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },

        // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
        // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
        customInsert: function (insertImg, result, editor) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

            // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
            let url = result.url;
            insertImg(url);//执行将上传的图片插入到wangEditor
            // result 必须是一个 JSON 格式字符串！！！否则报错
        }
    };

    editor.create();
</script>
<script src="../../../js/back/product/productEdit.js"></script>